21. Работа с Axios HTTP-запросы в JavaScript

Что такое Axios?

Axios — это promise-based HTTP-клиент для JavaScript, который работает как в браузере, так и в Node.js. Он предоставляет простой и удобный интерфейс для выполнения HTTP-запросов, таких как GET, POST, PUT, DELETE и других. Axios автоматически преобразует данные в JSON, поддерживает перехватчики (interceptors) и имеет встроенную защиту от XSRF.

---

Основы работы с Axios

1. Выполнение GET-запроса

GET-запросы используются для получения данных с сервера.

const axios = require('axios');

axios.get('https://jsonplaceholder.typicode.com/posts/1')
    .then((response) => {
        console.log('Данные получены:', response.data);
    })
    .catch((error) => {
        console.error('Ошибка:', error);
    });

2. Выполнение POST-запроса

POST-запросы используются для отправки данных на сервер.

axios.post('https://jsonplaceholder.typicode.com/posts', {
    title: 'Новый пост',
    body: 'Это содержимое нового поста.',
    userId: 1,
})
    .then((response) => {
        console.log('Пост создан:', response.data);
    })
    .catch((error) => {
        console.error('Ошибка:', error);
    });

3. Параллельные запросы

Axios позволяет выполнять несколько запросов одновременно с помощью axios.all.

axios.all([
    axios.get('https://jsonplaceholder.typicode.com/posts/1'),
    axios.get('https://jsonplaceholder.typicode.com/comments/1'),
])
    .then(axios.spread((postResponse, commentResponse) => {
        console.log('Пост:', postResponse.data);
        console.log('Комментарий:', commentResponse.data);
    }))
    .catch((error) => {
        console.error('Ошибка:', error);
    });

---

Обработка ошибок

Axios предоставляет удобный способ обработки ошибок, которые могут возникнуть при выполнении запросов.

Пример обработки ошибок:

axios.get('https://jsonplaceholder.typicode.com/invalid-url')
    .then((response) => {
        console.log('Данные получены:', response.data);
    })
    .catch((error) => {
        if (error.response) {
            // Сервер ответил с кодом ошибки (4xx, 5xx)
            console.error('Ошибка сервера:', error.response.status);
        } else if (error.request) {
            // Запрос был сделан, но ответ не получен
            console.error('Нет ответа от сервера');
        } else {
            // Ошибка настройки запроса
            console.error('Ошибка настройки запроса:', error.message);
        }
    });

---

Перехватчики (Interceptors)

Axios позволяет использовать перехватчики для обработки запросов и ответов перед их отправкой или получением.

Пример использования перехватчиков:

// Добавление перехватчика для запросов
axios.interceptors.request.use((config) => {
    console.log('Запрос отправлен:', config.url);
    return config;
}, (error) => {
    return Promise.reject(error);
});

// Добавление перехватчика для ответов
axios.interceptors.response.use((response) => {
    console.log('Ответ получен:', response.status);
    return response;
}, (error) => {
    return Promise.reject(error);
});

---

Использование Axios в Electron

Axios можно легко интегрировать в Electron-приложение для выполнения HTTP-запросов. Рассмотрим пример с использованием Context Isolation.

Шаг 1: Настройка проекта Electron

1. Создайте базовое Electron-приложение с включённой contextIsolation и отключённой nodeIntegration.
2. Добавьте файл предзагрузки (preload.js), который будет предоставлять рендереру доступ к Axios.

Пример index.js:

const { app, BrowserWindow } = require('electron');
const path = require('path');

function createWindow() {
    const mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js'),
            contextIsolation: true,
            nodeIntegration: false,
        },
    });

    mainWindow.loadFile('index.html');
}

app.whenReady().then(() => {
    createWindow();
});

Пример preload.js:

const { contextBridge } = require('electron');
const axios = require('axios');

contextBridge.exposeInMainWorld('axiosAPI', {
    get: (url) => axios.get(url),
    post: (url, data) => axios.post(url, data),
});

Шаг 2: Использование Axios в рендерере

Теперь, когда Axios доступен через contextBridge, мы можем использовать его в рендерере для выполнения HTTP-запросов.

Пример renderer.js:

async function fetchData() {
    try {
        const response = await window.axiosAPI.get('https://jsonplaceholder.typicode.com/posts/1');
        console.log('Данные получены:', response.data);
        document.getElementById('result').innerText = JSON.stringify(response.data, null, 2);
    } catch (error) {
        console.error('Ошибка:', error);
    }
}

document.getElementById('fetchButton').addEventListener('click', fetchData);

Пример index.html:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Axios в Electron</title>
</head>
<body>
    <h1>Axios в Electron</h1>
    <button id="fetchButton">Получить данные</button>
    <pre id="result"></pre>
    <script src="renderer.js"></script>
</body>
</html>

---

Практическое задание

1. Создайте Electron-приложение с использованием Axios для выполнения HTTP-запросов.
2. Реализуйте GET-запрос для получения данных с публичного API (например, JSONPlaceholder).
3. Отобразите полученные данные в интерфейсе приложения.
4. Добавьте POST-запрос для отправки данных на сервер и отображения ответа.

Дополнительные задания:

• Добавьте обработку ошибок для случаев, когда сервер недоступен или возвращает ошибку.
• Используйте перехватчики для логирования всех запросов и ответов.
• Реализуйте возможность отмены запроса, если пользователь передумал ждать.

---

Заключение

Axios — это мощный и удобный инструмент для выполнения HTTP-запросов в JavaScript. Он поддерживает множество функций, таких как обработка ошибок, перехватчики и автоматическое преобразование данных в JSON. В этом занятии мы рассмотрели, как использовать Axios в браузере, Node.js и Electron-приложениях с использованием Context Isolation.

---

Этот файл можно использовать как референс для занятия по работе с Axios, включая его интеграцию в Electron-приложения.